<script setup lang="ts">
import F_list, {type filterGroupType} from "@/components/admin/f_list.vue";
import type {columnType} from "@/components/admin/f_list.vue";
import {reactive, ref} from "vue";
import {userStorei} from "@/stores/user_store";
import {orderListApi, type orderType} from "@/api/order_api";
import {orderStatusOptions, orderPaySourceOptions} from "@/options";
import F_pay_modal from "@/components/common/f_pay_modal.vue";

const store = userStorei()
const columns: columnType[] = [
  {title: "订单号", dataIndex: 'no'},
  {title: "订单金额", dataIndex: 'price', type: "money"},
  {title: "购买积分", dataIndex: 'scope'},
  {title: "支付状态", dataIndex: 'payStatus', type: "options", options: orderStatusOptions,},
  {title: "支付渠道", dataIndex: 'paySource', type: "options", options: orderPaySourceOptions,},
  {title: "创建时间", dataIndex: 'createdAt', type: "date"},
  {title: "支付时间", dataIndex: 'payedTime', type: "date"},
  {title: "操作", slotName: 'action'},
]

const visible = ref(false)
const fListRef = ref()

const filters: filterGroupType[] = [
  {
    label: "支付状态",
    source: orderStatusOptions,
    column: "payStatus"
  }
]

const activeOrder = reactive<orderType>({
  "id": 0,
  "createdAt": "",
  "userID": 10,
  "no": "",
  "price": 100,
  "scope": 100,
  "payStatus": 1,
  "paySource": 1,
  "payUrl": "",
  "payedTime": null,
  "deletedAt": null,
  "userNickname": "lennon",
  "userAvatar": ""
})

function showPayModal(record: orderType) {
  Object.assign(activeOrder, record)
  visible.value = true
}

function refreshList() {
  fListRef.value.getList(); // 这是刷新列表的方法
}

</script>

<template>
  <div class="orderListView">
    <f_pay_modal
        v-model:visible="visible"
        :order="activeOrder"
        @success="refreshList"
        @fail="refreshList"></f_pay_modal>
    <f_list
        ref="fListRef"
        :url="orderListApi"
        no-add
        no-edit
        :params="{isDeleted: false, type: 1}"
        :filter-group="filters"
        :columns="columns">
      <template #action_left="{record}:{record: orderType}">
        <a-button type="primary" @click="showPayModal(record)" v-if="record.payStatus === 1">支付</a-button>
      </template>
    </f_list>
  </div>
</template>

<style lang="less">
.payModalBody {
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;

    .price {
      font-size: 34px;
      color: #f9a20f;
    }


    .notice {
      color: var(--color-text-2);
      margin-top: 10px;
    }
  }
}
</style>